<template>
  <div class="dialog-container">
    <el-dialog
      :title="dialogType=='add'?'添加角色':dialogType == 'detail'?'角色信息':'修改角色'"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
        :disabled="dialogType == 'detail'"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入角色名称" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号类型" prop="roleType">
              <el-select v-model="dataForm.roleType">
                <el-option
                  v-for="(item, index) in roleTypeList"
                  :key="index + '_role'"
                  :value="item.code"
                  :label="item.codeName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="角色等级" prop="level">
              <el-input-number v-model.number="dataForm.level" :controls="false" class="w-100" :min="1" :max="9999" placeholder="请输入角色等级" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-form-item label="数据范围" prop="dataScope">
              <el-select v-model="dataForm.dataScope" placeholder="请选择数据范围" @change="selectChange">
                <el-option label="全部" value="全部" />
                <el-option label="本级" value="本级" />
                <el-option label="本级及所有下级" value="本级及所有下级" />
                <el-option label="自定义" value="自定义" />
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <!-- <el-form-item v-if="dataForm.dataScope === '自定义'" label="数据权限" prop="deptIds">
          <treeselect
            v-model="dataForm.deptIds"
            class="w-100 form-treeselect"
            placeholder="请选择"
            :multiple="true"
            :options="deptTree"
            :load-options="loadDeptTree"
            :normalizer="deptNormalizer"
            :disabled="dialogType == 'detail'"
            no-children-text="没有更多了"
          />
        </el-form-item> -->
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="dataForm.description" type="textarea" :rows="5" placeholder="请输入角色描述" maxlength="255" />
        </el-form-item>
      </el-form>
      <span v-if="dialogType !== 'detail'" slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { add, edit } from '@/api/system/roles'
// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
// import { getTree as getDeptTree } from '@/api/system/system_dept'
import { getDict } from '@/utils/dict'
export default {
  name: 'AddRoleFormDialog',
  components: {
    // Treeselect
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'add'
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        id: '',
        name: '',
        // dataScope: '',
        // level: 1,
        roleType: '',
        deptIds: [],
        depts: [],
        description: ''
      },
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleType: [{ required: true, message: '请选择账号类型', trigger: 'change' }]
      },
      // 部门树
      deptTree: null,
      deptNormalizer(node) {
        let result = {
          id: node.id, label: node.name,
          children: node.children || null
        }
        if (!node.children) { result = { id: node.id, label: node.name } }
        return result
      },
      roleTypeList: []
    }
  },
  created() {
    this.roleTypeList = getDict('e036')
  },
  methods: {
    // async loadDeptTree({ action }) {
    //   if (action === LOAD_ROOT_OPTIONS) {
    //     getDeptTree().then(result => {
    //       var res = JSON.parse(JSON.stringify(result))
    //       var data = res.content
    //       function exec(array) {
    //         array.forEach(item => {
    //           if (!item.children || item.children.length === 0) {
    //             delete item.children
    //           } else {
    //             exec(item.children)
    //           }
    //         })
    //       }
    //       exec(data)
    //       this.deptTree = data
    //     })
    //   }
    // },
    selectChange(val) {
      // console.log(val)
    },
    initData() {
      this.saveLoading = false
      if (this.obj) {
        const obj = JSON.parse(JSON.stringify(this.obj))
        if (obj.depts && obj.depts.length > 0) {
          obj.deptIds = obj.depts.map(item => item.id)
        } else {
          obj.deptIds = []
        }
        this.dataForm = obj
      }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true

          // if (this.dataForm.dataScope !== '自定义') {
          //   this.dataForm.depts = []
          // } else {
          //   this.dataForm.depts = this.dataForm.deptIds.map(item => {
          //     return { id: item }
          //   })
          // }
          if (this.dataForm.id) {
            edit(this.dataForm).then(() => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
            }).catch(() => {
              this.saveLoading = false
            })
          } else {
            add(this.dataForm).then(() => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
            }).catch(() => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
      this.$refs['form'].clearValidate()
    },
    clearData() {
      this.dataForm = {
        id: '',
        name: '',
        // level: 1,
        // dataScope: '',
        deptIds: [],
        depts: [],
        description: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
